<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <Remind v-if="isShowRemind" @update:data="handleRemindUpdate">
                <template #title>
                    <b>温馨提示：</b>
                </template>
                <template #content>
                    若使用技术文章导入功能，在导入后需修改添加关键词后，才能发布推广
                </template>
            </Remind>
        </div>
        <div class="flex justify-between pt-26px pl-26px pr-26px relative">
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="待发布" path="" :quantity="state.toBeReleasedLength" :index="0">
                    <div class="pt-26px pb-26px" v-if="state.isLoading">
                        <el-skeleton :rows="10" animated />
                    </div>
                    <template v-else>
                        <Article :tableData="state.articles" :page="state.page" @update:data="handleUpdateArticle" />
                    </template>
                </TabItem>
                <TabItem label="已撤消" path="" :quantity="state.reversedLength" :index="1">
                    <div class="pt-26px pb-26px" v-if="state.isLoading">
                        <el-skeleton :rows="10" animated />
                    </div>
                    <template v-else>
                        <Article :tableData="state.articles" :page="state.page" @update:data="handleUpdateArticle" />
                    </template>
                </TabItem>
            </Tabs>
            <div class="flex items-center absolute right-26px">
                <div class="text-14px mr-15px">主关键词文章已添加 <el-text type="primary" class="font-bold">{{ state.publishedArticle }}</el-text> 条，还可添加 <el-text type="success" class="font-bold">{{ state.publishArticle }}</el-text> 条
                </div>
                <el-button :loading="state.loading" type="primary" @click="handleImport"><svg-icon size="18px" icon-class="import-line" class="mr-4px"></svg-icon>文章导入</el-button>
            </div>
        </div>
        <ArticleImport v-model:isImport="isImport" :publishedArticle="state.publishedArticle" :publishArticle="state.publishArticle" @closeDialog="handleClose" @updatePublishArticle="updatePublishArticle" />
        
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import Article from './components/Article.vue'
import { getArticleListApi,importArticleApi } from '@/api/b2b/index'
import { WarningFilled } from '@element-plus/icons-vue'
import { confirmMessageBox } from '@/utils/elMessageBox'

const isShowRemind = ref(true)

const activeIndex = ref(0)

const confirmDialogRef = ref()

const state = reactive({
    articles: [],
    status: 0,   //状态
    page: {
        total: 0,
        curPage: 1,
        limit: 10,
        pageSizes: 10,
    },
    isImport: false,
    publishArticle: 0,
    publishedArticle: 0,
    toBeReleasedLength: 0,
    reversedLength: 0,
    totalArticle:0,
    isLoading:true,
    loading:false
})

const isImport = ref(false)

function handleTabClick(val: any) {
    if (val.label === '已撤消') {
        state.status = 2
    } else if (val.label === '待发布') {
        state.status = 0
    }
    //每次切换的时候重置分页，重新获取数据
    const { index } = val
    activeIndex.value = index
    state.page.curPage = 1
    state.page.pageSizes = 10
    getArticleList()
}

function handleRemindUpdate() {
    isShowRemind.value = !isShowRemind.value
}

async function handleImport() {
    state.loading = true
    const res: ResType = await importArticleApi()
    if(res.code === 200){
        state.loading = false
        isImport.value = true
    }else if(res.code === 405){
        confirmMessageBox(WarningFilled, res.message)
    }
}

async function handleUpdateArticle(value: any) {
    state.page.curPage = value.curPage
    state.page.pageSizes = value.pageSizes
    state.page.limit = value.limit
    await getArticleList()
}

async function handleClose(){
    isImport.value = false
    state.publishArticle = state.totalArticle - state.publishedArticle
    await getArticleList()
}

function updatePublishArticle(n:number){
    state.publishArticle = state.totalArticle - state.publishedArticle - n
    if(state.publishArticle < 0){
        confirmDialogRef.value?.showConfirm()
    }
}

async function getArticleList() {
    const res: ResType = await getArticleListApi({
        state: 2,
        isUpperShelf: state.status,
        orderkey: 0,
        pn: state.page.curPage,
        pagesize: state.page.pageSizes,
    })
    if (res.code === 200) {
        state.isLoading = false
        state.articles = res.data;
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
        state.toBeReleasedLength = res.wckcount2
        state.reversedLength = res.wckcount3
        state.publishArticle = res.yuCount
        state.publishedArticle = res.fabuCount
        state.totalArticle = res.articleNumber
    }
}

onMounted(() => {
    getArticleList()
})
</script>

<style scoped></style>